lodash.debounce

What is lodash.debounce?

The lodash.debounce package provides a function that can delay the execution of a function until after wait milliseconds have elapsed since the last time it was invoked. It is useful for implementing behavior that should only happen after a delay, such as waiting for a pause in typing or reducing the frequency of API calls.

What are lodash.debounce's main functionalities?

Debouncing function calls

This code sample shows how to debounce a function that saves input data. The saveInput function will only be called once every 250 milliseconds, no matter how many times the event is triggered.

const debounce = require('lodash.debounce');
const saveInput = debounce((value) => {
  // Save the input value
  console.log('Saving data:', value);
}, 250);
// Will only trigger the saveInput function once every 250ms
document.getElementById('input').addEventListener('keyup', (event) => {
  saveInput(event.target.value);
});

Canceling a debounced call

This code sample demonstrates how to cancel a debounced function call. If the expensiveOperation is debounced and then canceled before the debounce time has elapsed, the function will not be executed.

const debounce = require('lodash.debounce');
const expensiveOperation = debounce(() => {
  // Perform an expensive operation
  console.log('Expensive operation executed');
}, 1000);
expensiveOperation();
expensiveOperation.cancel();

Immediate invocation

This code sample illustrates how to invoke the debounced function immediately on the leading edge of the timeout, without waiting for the trailing edge. The trackEvent function will be called immediately on the first click, but subsequent clicks within 200 milliseconds will not invoke the function again.

const debounce = require('lodash.debounce');
const trackEvent = debounce((event) => {
  // Track the event
  console.log('Event tracked:', event);
}, 200, {
  'leading': true,
  'trailing': false
});
// Will trigger on the leading edge instead of the trailing edge
document.getElementById('button').addEventListener('click', (event) => {
  trackEvent('Button clicked');
});

Other packages similar to lodash.debounce

throttle-debounce

The throttle-debounce package provides both throttle and debounce functions. It is similar to lodash.debounce but also includes a throttle function, which is useful for rate-limiting function calls.

debounce-promise

debounce-promise is a package that debounces a function that returns a promise. It is similar to lodash.debounce but is specifically tailored for use with promises, aggregating multiple calls into a single promise.

debounce-fn

debounce-fn is a package that offers debouncing functionality. It is similar to lodash.debounce but provides a simpler API and is built as an ESM-only module, which means it can only be imported using ES module syntax.

README

lodash.debounce v3.1.1

The modern build of lodash’s _.debounce exported as a Node.js/io.js module.

Installation

Using npm:

$ {sudo -H} npm i -g npm
$ npm i --save lodash.debounce

In Node.js/io.js:

var debounce = require('lodash.debounce');

See the documentation or package source for more details.